<script setup>
  import { ref,watch } from 'vue'
  import { useRoute } from 'vitepress'
  const route = useRoute()
  const routerPath = ref('')
  watch(() => route.component.name,name => {
    if(name.includes('components')) {
      routerPath.value = `pages/${name.split('.').shift()}`
    }else {
      routerPath.value = ''
    }
  },{
    immediate: true
  })
  const devUrl = 'http://localhost:5173'
  const devOrigin = 'http://localhost:8080'
  const windowOrigin = 'https://shier112.github.io'
  const origin = ref((windowOrigin === devUrl ? devOrigin : windowOrigin) + '/seui-preview/')
</script>

<template>
  <div class="preview">
    <iframe class="preview-page" :src="`${origin}#/${routerPath}`" frameborder="0"></iframe>
  </div>
</template>

<style scoped>
  .preview {
    width: 340px;
    height: 550px;
    border-radius: 20px;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #f5f5f5;
  }
  .preview-page {
    width: 100%;
    height: 100%;
  }
</style>